<template>
	<div class="w-block">
		<div class="table-nav">
			<div class="table-description">{{title}}</div>
			<slot name="list"></slot>
		</div>
		<slot></slot>
	</div>
</template>

<script>
export default {
	name      : "WBlock",
	components: {},
	props     : {
		title: {
			type    : String,
			required: true
		}
	},
	data() {return {}},
	computed  : {},
	watch     : {},
	methods   : {},
	mounted() {},
}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/_variables.scss";

	.w-block {
		padding: 30px 40px 0;
		overflow: hidden;
		@include flex-column(flex-start, flex-start);
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		background-color: #fff;

		> div {
			width: 100%;
		}

		.table-nav {
			width: 100%;
			@include space-between();

			.table-description {
				width: fit-content;
				min-width: fit-content;
				font-size: 16px;
				color: #3a404c;
				letter-spacing: 2px;
				font-weight: 600;

				&:before {
					vertical-align: bottom;
					margin-right: 10px;
					display: inline-block;
					width: 3px;
					height: 16px;
					border-radius: 3px;
					background-color: #4c81f6;
					content: ' ';
				}
			}
		}
	}
</style>
